<template>
  <div style="width: 100%">
    <el-table :data="tableData" stripe>
      <el-table-column label="软件名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.softname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="卡类名称" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.keyname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="使用时间">
        <template slot-scope="scope">
          <span>{{scope.row.cday}} 天</span>
        </template>
      </el-table-column>
      <el-table-column label="零售价">
        <template slot-scope="scope">
          <span>￥{{scope.row.retailprice}}</span>
        </template>
      </el-table-column>
      <el-table-column label="代理价">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.agentPrice"
            placeholder="填写代理价"
            clearable
            size="small"
            v-show="currentEdit==scope.$index"
          ></el-input>
          <span v-show="currentEdit!=scope.$index">{{scope.row.agentPrice}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <div v-show="currentEdit!=scope.$index">
            <i
              class="el-icon-edit main-ico-btn"
              style="margin-left:0"
              @click="handleEdit(scope.$index)"
            ></i>
            <i class="el-icon-delete main-ico-btn" @click="handleRemove(scope.$index)"></i>
          </div>
          <div v-show="currentEdit==scope.$index">
            <el-button size="mini" @click="handleSave(scope.$index)">保存</el-button>
            <el-button size="mini" @click="handleCancel(scope.$index)">取消</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="[1]" :show-header="false">
      <el-table-column prop="date" label width="200">
        <template slot-scope="scope">
          <el-select placeholder="选择软件类型" style="width:150px" v-model="softcode" size="small">
            <el-option label="请选择" value="-1"></el-option>
            <el-option
              v-for="item of $store.getters.softlist"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="date" label width="200">
        <template slot-scope="scope">
          <el-select placeholder="选择软件卡类" style="width:150px" v-model="cardType" size="small">
            <el-option label="请选择" value="-1"></el-option>
            <el-option v-for="item of keyCategory" :label="item.keyname" :value="item.prefix"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="date" label>
        <template slot-scope="scope">
          <span>{{ui.day}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label>
        <template slot-scope="scope">
          <span>{{ui.price}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label>
        <template slot-scope="scope">
          <el-input v-model="agentPrice" placeholder="填写代理价格" clearable size="small"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleAdd">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "igfkeycard",
  data() {
    return {
      currentEdit: -1,
      keyCategory: [],
      softcode: "-1",
      cardType: "-1",
      agentPrice: 0,
      ui: {
        day: "",
        price: ""
      }
    };
  },
  props: {
    tableData: {
      type: Array,
      default: []
    },
    username: {
      type: String,
      default: ""
    }
  },
  methods: {
    async handleAdd() {
      if (this.softcode=="-1") {
        this.$message.error("请选择软件类型！");
        return;
      }
      if (this.cardType=="-1") {
        this.$message.error("请选择软件卡类！");
        return;
      }
      if (!this.$utils.isNumber(this.agentPrice) || this.agentPrice <= 0) {
        this.$message.error("价格只能为数字且不能小于0！");
        return;
      }
      let postData = {
        username: this.username,
        softcode: this.softcode,
        prefix: this.cardType,
        agentPrice: this.agentPrice
      };
      let res = await this.$http.post("/agent/addAuction", postData);
      if (res.status) {
        this.tableData.push(res.result);
        this.$message({
          message: res.text,
          type: "success"
        });
      } else {
        this.$message.error(res.text);
      }
    },
    handleEdit(index) {
      this.currentEdit = index;
    },
    async handleRemove(index) {
      try {
        await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        let res = await this.$http.post("/agent/removeAuction", {
          username: this.username,
          softcode: this.tableData[index].softcode,
          prefix: this.tableData[index].prefix
        });
        if (res.status) {
          this.tableData.splice(index, 1);
        } else {
          this.$message.error(res.text);
        }
      } catch (err) {}
    },
    async handleSave(index) {
      if (
        !this.$utils.isNumber(this.tableData[index].agentPrice) ||
        this.tableData[index].agentPrice <= 0
      ) {
        this.$message.error("价格只能为数字且不能小于0！");
        return;
      }
      this.currentEdit = -1;
      let postData = {
        _id: this.tableData[index]._id,
        username: this.username,
        agentPrice: this.tableData[index].agentPrice
      };
      let res = await this.$http.post("/agent/updateAuction", postData);
      if (res.status) {
        this.$message({
          message: res.text,
          type: "success"
        });
        this.currentEdit = -1;
      } else {
        this.$message.error(res.text);
      }
    },
    handleCancel(index) {
      this.currentEdit = -1;
    }
  },
  watch: {
    softcode: async function(value) {
      this.cardType = "-1";
      this.keyCategory = [];
      if (value !== "-1") {
        let res = await this.$http.post("/card/keysetlist", {
          softcode: value
        });
        this.keyCategory = res;
      }
    },
    cardType: function(value) {
      if (value !== "-1") {
        let that = this;
        this.keyCategory.forEach(function(element) {
          if (element.prefix == value) {
            that.ui.price = "￥" + element.retailprice;
            that.ui.day = element.cday + "天";
          }
        });
      } else {
        this.ui.price = "￥";
        this.ui.day = "";
      }
    }
  },
  created() {}
};
</script>

<style scoped>
</style>
